<template>
  <div id="app">
    <!-- 模态弹框 -->
    <div class="alertmodel" v-if="visiModel">
      <!-- 所有商品 -->
      <span class="chaleft" @click="hiddenModel" v-if="tansitionGoods">×</span>
      <div :class="['allGoods', { tansitionallGoods: tansitionGoods }]">
        <div class="leftFlex" @click="toGoods('cake')">
          <h3>所有蛋糕</h3>
          <span>Products</span>
        </div>
        <div>
          <span class="leftspan" @click="changedropDown">口味筛选</span>
          <div v-if="dropDown">
            <div v-for="(item, index) in cakeArr" :key="index" class="leftFlex">
              <p>{{ item.type }}</p>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
        <div>
          <span class="leftspan" @click="changedropDown">场景筛选</span>
          <div v-if="!dropDown">
            <div
              v-for="(item, index) in placeArr"
              :key="index"
              class="leftFlex"
            >
              <p>{{ item.type }}</p>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
        <div class="leftFlex" @click="toGoods('bread')">
          <h3>所有面包</h3>
          <span>Bread</span>
        </div>
        <div class="leftFlex" @click="toGoods('xiaoshi')">
          <h3>所有小食</h3>
          <span>Snacks</span>
        </div>
        <div class="leftFlex" @click="toGoods('parts')">
          <h3>所有配件</h3>
          <span>Parts</span>
        </div>
        <div class="serch" v-if="tansitionGoods">
          <input type="text" v-model="goodstype" @keydown.13="serchGoods()" />
          <span class="iconfont icon-sousuo" @click="serchGoods"></span>
        </div>
      </div>
      <!-- 更多 -->
      <span class="charight" @click="hiddenModel" v-if="tansitionmore">×</span>
      <dir :class="['allGoods', { tansitionallmore: tansitionmore }]">
        <div class="right-top">
          <span class="iconfont icon-daohangbiao"></span>
          <span>导航</span>
        </div>
        <div class="right-buttom">
          <h5>服务热线</h5>
          <p>4006-678-678</p>
          <h5>服务时间</h5>
          <p>4006-678-678</p>
          <h5>配送范围</h5>
          <p>配送范围内满98元免配送费</p>
        </div>
      </dir>
    </div>
    <div class="nav-left">
      <img src="./img/logo.png" alt="" />
      <div>
        <span class="iconfont icon-icon-test1"></span>
        <p>成都市</p>
      </div>
      <div @click="alertLeft">
        <span class="iconfont icon-mulu"></span>
        <p>所有产品</p>
      </div>
      <div
        v-for="(item, index) in typeArr"
        :key="index"
        :data-id="item.id"
        @mouseenter="visitLine"
        @mouseleave="hiddenLine"
        @click="goPath(item.path)"
      >
        <span class="line" v-if="item.id == visit1"></span>
        <span id="line" v-if="item.id == $store.state.typename"></span>
        <span :class="item.img1"></span>
        <p>{{ item.text }}</p>
      </div>
    </div>
    <div class="nav-right">
      <div @click="changeIsclicklogin">
        <span class="iconfont icon-wode"></span>
        <p v-if="islogin">我的</p>
        <p v-else>未登录</p>
      </div>
      <div @click="alertModelcar">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
      </div>
      <div @click="alertRight">
        <span class="iconfont icon-gengduo"></span>
        <p>更多</p>
      </div>
    </div>
    <div id="modelCarbox" v-if="$store.state.modelCarbox">
      <alert-car :class="{ alertCar: $store.state.isCarclic }">
        <template v-slot:gocar>
          <span @click="alertModelcar">
            <router-link to="/Car" id="gocarbtm">进入购物车</router-link>
          </span>
        </template>

        <template v-slot:gopay
          ><span @click="alertModelcar">
            <router-link to="/Payment">去结算</router-link></span
          ></template
        >
      </alert-car>
    </div>
    <Login v-if="$store.state.isclicklogin"></Login>
  </div>
</template>
<script>
import alertCar from "../../views/ljy/alertCar/alertCar.vue";
import Login from "../../views/lqc/loginBox.vue";
export default {
  components: { alertCar, Login },
  data() {
    return {
      visit1: "",
      visiModel: "",
      islogin: false,
      tansitionGoods: "",
      tansitionmore: "",
      dropDown: true,
      goodstype: "*", //搜索商品的类型 默认为*
      typeArr: [
        { id: "home", text: "首页", img1: "iconfont icon-shouye", path: "/" },
        {
          id: "cake",
          text: "蛋糕",
          img1: "iconfont icon-tubiao-shangchuan-",
          path: "/cake",
        },
        {
          id: "bread",
          text: "面包",
          img1: "iconfont icon-mianbao",
          path: "/bread",
        },
        {
          id: "snack",
          text: "小食",
          img1: "iconfont icon-xiaochiba",
          path: "/xiaoshi",
        },
        {
          id: "activities",
          text: "最新活动",
          img1: "iconfont icon-huodong",
          path: "active",
        },
      ],
      cakeArr: [
        { type: "生日", count: "3" },
        { type: "聚会", count: "3" },
        { type: "情侣", count: "3" },
        { type: "儿童", count: "3" },
        { type: "长辈", count: "3" },
        { type: "下午茶", count: "3" },
      ],
      placeArr: [
        { type: "拿破仑", count: "3" },
        { type: "奶油", count: "3" },
        { type: "慕斯", count: "3" },
        { type: "芝士", count: "3" },
        { type: "巧克力", count: "3" },
        { type: "咖啡", count: "3" },
      ],
    };
  },
  mounted() {
    let isLogin = window.localStorage.getItem("isLogin");
    this.islogin = isLogin;
  },
  methods: {
    toGoods(path) {
      this.$router.push(`/${path}`);
      this.hiddenModel();
    },
    visitLine(e) {
      this.visit1 = e.target.dataset.id;
    },
    hiddenLine(e) {
      this.visit1 = "";
    },
    alertLeft() {
      this.visiModel = true;
      setTimeout(() => {
        this.tansitionGoods = true;
      }, 200);
    },
    alertRight() {
      this.visiModel = true;
      setTimeout(() => {
        this.tansitionmore = true;
      }, 200);
    },
    hiddenModel() {
      this.visiModel = "";
      this.tansitionGoods = "";
      this.tansitionmore = "";
    },
    goPath(path) {
      this.$router.push(path);
    },
    changedropDown() {
      this.dropDown = !this.dropDown;
    },
    changeIsclicklogin() {
      this.$store.commit("changeisclicklogin");
    },
    async alertModelcar() {
      let isLogin = window.localStorage.getItem("isLogin");
      if (isLogin) {
        let res = await this.axios("/ljy/usercar");
        res.data.map((el) => {
          el.flag = true;
        });
        this.$store.commit("changeUserCar", res.data);
        this.$store.commit("alertModelcar");
        setTimeout(() => {
          this.$store.commit("alertisCarclic");
        }, 200);
      } else {
        alert("请先登录");
        this.$store.commit("changeisclicklogin");
      }
    },
    async serchGoods(e) {
      // this.$route.push(path)
      let res = await this.axios("/ljy/serchGoods", {
        params: { goods_name: this.goodstype },
      });
      if (res.data[0].goods_sort == "蛋糕") {
        this.$store.commit("changecakeArr", res.data);
        this.$router.push("/cake");
      } else if (res.data[0].goods_sort == "面包") {
        this.$store.commit("changebreadArr", res.data);
        this.$router.push("/bread");
      } else if (res.data[0].goods_sort == "小食") {
        this.$store.commit("changesnakeArr", res.data);
        this.$router.push("/xiaoshi");
      } else if (res.data[0].goods_sort == "配件") {
        this.$store.commit("changesnakeArr", res.data);
        this.$router.push("/xiaoshi");
      } else {
        this.$router.push("/home");
      }
      this.hiddenModel();
    },
  },
};
</script>
<style scoped lang="scss">
#app {
  display: flex;
  height: 120px;
  width: 100%;
  position: fixed;
  z-index: 99;
  background-color: white;
  // overflow: hidden;
  border-bottom: 1px solid #d4d7d8;
  left: 0;
  top: 0;
  p {
    font-size: 12px;
    margin-top: 10px;
  }
}
.nav-left,
.nav-right {
  display: flex;
  div:not(.alertCar) {
    text-align: center;
    width: 100px;
    height: 90px;
    color: #8c8c8c;
    padding-top: 30px;
    position: relative;
    border-left: 1px solid #c9cbcc;
    span {
      font-size: 24px;
    }
    a {
      text-decoration: none;
      color: #8c8c8c;
    }
    a:hover {
      color: black;
      cursor: pointer;
    }
  }
  div:hover {
    color: black;
    cursor: pointer;
  }
}
.nav-left div:last-child {
  border-right: 1px solid #c4c6c7;
}
.nav-right {
  position: absolute;
  right: 0;
  top: 0;
}
#modelCarbox {
  width: 100%;
  height: 600px;
  position: fixed;
  left: 0;
  top: 120px;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.4);
}
.alertCar {
  position: fixed;
  right: 0;
  width: 500px;
  height: 500px;
  border-left: none;
  top: 120px;
}
#gocarbtm {
  text-decoration: none;
  color: white;
  width: 100%;
  height: 100%;
}
#line,
.line {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffe32a;
}
.alertmodel {
  width: 100%;
  height: 800px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);

  .allGoods {
    width: 0;
    height: 0;
    overflow: hidden;
    padding-left: 25px;
    transition: all 0.4s;
    background-color: white;
    h3:hover {
      cursor: pointer;
    }
    .right-top {
      display: flex;
      width: 80%;
      margin: 0 auto;
      font-size: 18px;
      color: #8c8c8c;
      justify-content: space-between;
    }
    .right-buttom {
      font-size: 20px;
      width: 80%;
      margin: 0 auto;
      margin-top: 160px;
      h5 {
        margin-top: 20px;
      }
    }
  }
  .tansitionallGoods {
    width: 450px;
    height: 650px;
    padding-top: 30px;
  }
  .tansitionallmore {
    width: 350px;
    height: 400px;
    padding-top: 30px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .chaleft {
    position: absolute;
    left: 500px;
    font-size: 40px;
    color: white;
    top: 20px;
  }
  .chaleft:hover {
    cursor: pointer;
  }
  .charight {
    position: absolute;
    right: 478px;
    font-size: 40px;
    color: white;
    top: 20px;
  }
  .charight:hover {
    cursor: pointer;
  }
}
.leftFlex {
  display: flex;
  width: 400px;
  justify-content: space-between;
  a {
    text-decoration: none;
    color: black;
  }
  p {
    margin-left: 40px;
    color: #8c8c8c;
  }
  span {
    color: #8c8c8c;
  }
  p:hover {
    cursor: pointer;
  }
}
.leftspan {
  margin-left: 20px;
}
.leftspan:hover {
  cursor: pointer;
}
.allGoods > div {
  margin-bottom: 30px;
}
.serch {
  width: 350px;
  overflow: hidden;
  border-bottom: 1px solid rgb(85, 81, 81);
  input {
    width: 300px;
    height: 30px;
    border: none;
    outline: none;
  }
  span {
    font-size: 22px;
    color: #8c8c8c;
    margin-left: 20px;
  }
  span:hover {
    cursor: pointer;
  }
}
</style>
